<template>
    <!--本地报纸-->
    <div class="local-newspaper full-background">
        <div class="contain">
            <div class="content-box">
                <div class="top-box">
                    <div class="recommend-daily">
                        <a-icon class="icon" type="read" />
                        &nbsp;每日推荐
                    </div>
                    <look-more :to="{path:'/ResourceGuides/LocalNewspaper',query:{code:'local-newspaper'}}"/>
                </div>
                <div class="body-box">
                    <!--报纸展示列表-->
                    <div class="newspaper-box">
                        <newspaper-component
                            class="newspaper-item"
                            v-for="(item, index) in newspaperDataList"
                            :key="index"
                            :newspaper-data="item"
                        />
                    </div>
                </div>
            </div>
            <router-link class="slip-down-box" :to="{path:'/VideoLecture', query:{code:'video-lecture'}}">
                <a-icon class="down-img" type="double-right"/>
            </router-link>
        </div>
    </div>
</template>

<script>
import LookMore from "../../components/ToolComponent/LookMore";
import NewspaperComponent from "../../components/SourseDataComponent/Newspaper/NewspaperComponent";
import LoadTopicPageDataMixin from "@/mixins/LoadTopicPageDataMixin";

//本地报纸栏目code
const CODE = "local-newspaper";
export default {
    name: "LocalNewspaper",
    data(){
        return{
            //页面数据
            newspaperDataList:[]
        }
    },
    components: {
        NewspaperComponent,
        LookMore
    },
    mixins:[
        //获取子栏目资源
        LoadTopicPageDataMixin,
    ],
    created(){
        //设置栏目code
        this.setPageDataCode(CODE);
        //设置页面大小
        this.setPageSize(5);
        //加载栏目数据
        this.loadPageData(1).then(() => {
            this.newspaperDataList = this.pageData.records;
        });
    },
}
</script>

<style lang="less" scoped>
@import "../../assets/global.less";
//phone
@media only screen and (max-width: 576px){
    @width:100vw;
    @min-height:100vh;
    .local-newspaper{
        background-image:url("../../assets/Phone-BackgroundImage/LocalNewspaper.png");
        width:@width;
        min-height: @min-height;
        .contain{
            .container;
            width:@width;
            min-height: @min-height;
            display:grid;
            grid-template-rows: repeat(10, 1fr);
            grid-template-columns: repeat(10, 1fr);
            .content-box{
                @content-width:calc(@width / 10 * 8);   //80vw
                @content-height:calc(@min-height / 10 * 8);  //144vw
                grid-row: 2 / span 8;
                grid-column: 2 / span 8;
                width:@content-width;
                height:@content-height;
                display:flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: center;
                background-color: white;
                border-radius: 1vw;
                .top-box{
                    width:calc(@content-width - 10vw); //80vw - 10vw
                    height:7vw;
                    line-height:7vw;
                    display:flex;
                    justify-content:space-between;
                    .recommend-daily{
                        color:rgba(15, 121, 205, 1);
                        font-size:3vw;
                        .icon{
                            font-size: 4vw;
                        }
                    }
                }
                .body-box{
                    border-top:1px solid rgba(15, 121, 205, 1);
                    width:calc(@content-width - 10vw);  //80vw - 10vw
                    height:calc(@content-height - 14vw); //144vw - 14vw
                    display:flex;
                    justify-content: center;
                    align-items: center;
                    .newspaper-box{
                        display:flex;
                        justify-content: flex-start;
                        align-items: flex-start;
                        flex-wrap: wrap;
                        .newspaper-item{
                            margin:2vw 1vw;
                            position:relative;
                            z-index:10;
                            &:nth-child(n + 5){
                                display:none;
                            }
                        }

                    }
                }

            }
            .slip-down-box{
                grid-row:10 / span 1;
                grid-column: 2 / span 8;
                width:calc(@width / 10 / 3 * 2);
                height:calc(@width / 10);
                place-self: center;
                transform: rotate(90deg);
                font-size: calc(@width / 10 / 3 * 2);
                .down-img{
                    color:RGBA(122, 128, 118, 1);
                }
            }

        }

    }
}

//pc
@media only screen and (min-width: 576px){

    .local-newspaper{
        background-image:url("../../assets/PC-BackgroundImage/local-newspaper.png");
        .contain{
            @width:900px;
            @height:360px;
            .container;
            display:grid;
            grid-template-rows: 1.5fr 4fr 1fr;
            .content-box{
                grid-row:2 / span 1;
                grid-column: 1 / span 1;
                width:@width;
                height:@height;
                justify-self: center;
                align-self: flex-start;
                display:flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                background-color:white;
                border-radius: 10px;
                .top-box{
                    width:calc(@width - 20px);
                    height:30px;
                    display:flex;
                    justify-content:space-between;
                    line-height:30px;
                    .recommend-daily{
                        color:rgba(15, 121, 205, 1);
                        font-size:14px;
                        .icon{
                            font-size: 18px;
                        }
                    }
                }
                .body-box{
                    border-top:1px solid rgba(15, 121, 205, 1);
                    width:calc(@width - 20px);  //900px - 20px
                    height:calc(@height - 50px); //360px - 50px;
                    display:flex;
                    justify-content: center;
                    align-items: center;
                    .newspaper-box{
                        width:calc(@width - 20px - 60px);
                        height:calc(@height - 50px - 40px);
                        display:flex;
                        justify-content: space-between;
                        flex-wrap: wrap;
                        .newspaper-item{
                            width:130px;
                            height:260px;
                            &:nth-child(n + 6){
                                display:none;
                            }
                        }

                    }
                }
            }
            .slip-down-box{
                display:none;
            }
        }

    }
}

</style>
